<template>
  <div class="my-data">
    <van-nav-bar title="我的资料" left-text="返回" left-arrow />
    <div class="main">
      <van-cell-group>
        <van-cell size="large">
          <template #title>
            <img src="/img/tx/1.jpg" alt="" class="tx-img" />
            <span class="ninikname">ekko</span>
          </template>
        </van-cell>
        <van-cell title="性别" is-link value="男" @click="showPopup">
          <van-popup
            v-model="showsex"
            round
            position="bottom"
            :style="{ height: '308px' }"
            :get-container="getContainer"
          >
            <van-picker
              title="标题"
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
            />
          </van-popup>
        </van-cell>
        <van-cell title="手机号" value="15871141610" />
        <van-cell title="地址" is-link />
        <van-cell title="修改密码" is-link />
      </van-cell-group>
      <div class="tanc"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showsex: false,
      columns: ["女", "男"],
      sex:"",
    };
  },
  methods: {
    showPopup() {
      this.showsex = true;
    },
    getContainer() {
      return document.querySelector(".tanc");
    },
    onCancel() {
      this.showsex = false;
    },
    //点击确定触发该事件
    onConfirm(value, index) {
      console.log("ddddd"+value,+index);
      this.sex=index;
      //关闭弹出框
      this.showsex = false;
    },
  },
};
</script>
<style scoped>
::v-deep .van-nav-bar__content {
  background-color: black;
}
::v-deep .van-nav-bar__title,
::v-deep .van-nav-bar__text,
::v-deep .van-icon-arrow-left::before {
  color: #fff;
  font-size: 1.2rem;
}
.my-data .main {
  background-color: rgb(202, 195, 195);
}
.my-data .main::before {
  display: table;
  content: "";
}
::v-deep .van-cell-group {
  margin-top: 20px;
}
.main .tx-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.main .ninikname {
  padding-left: 10px;
  font-size: 1.6rem;
}
</style>